<template>
  <view class="article-list-page">
    <view class="article-list-search-bar-fixed">
      <van-search
        v-model="searchValue"
        placeholder="输入关键词"
        shape="round"
        use-action-slot
        @search="onSearch"
        @change="onChage"
      >
        <template #action>
          <view
            class="article-list-search-btn"
            @tap="onSearch"
          >
            搜索
          </view>
        </template>
      </van-search>
    </view>
    <scroll-view
      class="article-list-scroll"
      :scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
      style="height: 100vh; padding-top: 110rpx"
    >
      <view
        v-for="(item, index) in teaList"
        :key="index"
        @click="goDetail(item)"
      >
        <!-- 茶介绍1、茶山3、茶工艺7 -->
        <ArticleCard
          v-if="[1, 3, 7].includes(menuType)"
          :info="item"
        />
        <!-- 茶厂4、茶商5 -->
        <ArticleCardV2
          v-if="[4, 5].includes(menuType)"
          :info="item"
        />
        <!-- 茶价格8 -->
        <ArticleCardV3
          v-if="[8].includes(menuType)"
          :info="item"
        />
        <!-- 茶赛事2 -->
        <ArticleCardV4
          v-if="[2].includes(menuType)"
          :info="item"
        />
        <!--TODO: 茶协会6 -->
      </view>
      <view
        v-if="loading"
        class="article-list-loading"
      >
        加载中...
      </view>
      <view
        v-if="noMore"
        class="article-list-nomore"
      >
        没有更多了
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import ArticleCard from '../../components/ArticleCard.vue'
  import ArticleCardV2 from '../../components/ArticleCardV2.vue'
  import ArticleCardV3 from '../../components/ArticleCardV3.vue'
  import ArticleCardV4 from '../../components/ArticleCardV4.vue'
  import {
    selectresentationDataByMenuList,
    eventRegistration
  } from '../../api/article.js'
  export default {
    components: { ArticleCard, ArticleCardV2, ArticleCardV3, ArticleCardV4 },
    data() {
      return {
        searchValue: '',
        teaList: [],
        page: 1,
        pageSize: 10,
        loading: false,
        noMore: false,
        refreshing: false,
        menuType: '',
        id: '',
        isSelf: false
      }
    },
    onLoad(options) {
      this.id = options.id
      this.isSelf = options?.isSelf === '1'
      uni.setNavigationBarTitle({
        title: this.isSelf ? '我的活动' : options.menuName
      })
      this.loadTeaList(true)
    },
    methods: {
      onChage(e) {
        this.searchValue = e.detail
      },
      onSearch() {
        this.loadTeaList(true)
      },
      async loadTeaList(reset = false) {
        if (reset) {
          this.page = 1
          this.noMore = false
          this.teaList = []
        }
        if (this.loading || this.noMore) return
        this.loading = true
        try {
          const params = {
            pageNum: this.page,
            pageSize: this.pageSize,
            keywords: this.searchValue,
            id: Number(this.id)
          }
          if (this.isSelf) {
            const user = uni.getStorageSync('user')
            const openId = user.openId
            const res = await eventRegistration({ openId })
            this.teaList = res.data
            this.menuType = 2
            console.log('isSelf-this.teaList: ', this.teaList)
          } else {
            const res = await selectresentationDataByMenuList(params)
            const rows =
              res?.data?.activities ||
              res?.data?.articleAnagements ||
              res?.data?.teaPriceVos ||
              []
            this.menuType = res?.data?.menuType
            this.teaList = reset ? rows : [...this.teaList, ...rows]
            console.log('this.teaList: ', this.teaList)
          }
          this.noMore = this.teaList.length < this.pageSize
          if (!this.noMore) this.page++
        } catch (error) {
          console.error('加载失败:', error)
          this.noMore = true
        } finally {
          this.loading = false
          this.refreshing = false
        }
      },
      onRefresh() {
        this.refreshing = true
        this.loadTeaList(true)
      },
      onLoadMore() {
        this.loadTeaList()
      },
      goDetail(item) {
        console.log('item: ', item)
        const id = item.id || ''
        const menuType = this.menuType
        const openId = item.openId || ''
        uni.navigateTo({
          url: `/pagesA/article/detail?id=${id}&menuType=${menuType}&openId=${openId}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .article-list-page {
    background: #fff;
    min-height: 100vh;
  }
  .article-list-search-bar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border-top: 1rpx solid #eaeaea;
    border-bottom: 1rpx solid #eaeaea;
  }
  .article-list-scroll {
    height: 100vh;
    overflow: auto;
    padding: 20rpx 0;
  }
  .article-list-loading,
  .article-list-nomore {
    text-align: center;
    color: #999;
    font-size: 28rpx;
    padding: 30rpx 0;
  }
  .article-list-search-btn {
    color: #999999;
    width: 100rpx;
    text-align: center;
  }
</style>
